<template>
	<view>
		<fa-navbar :safeAreaInsetTop="false" :title="title" ref="navbar"></fa-navbar>
		<view class="content">
			<view>
				<text class="tips" :style="{'color':theme.bgColor}">请输入验证码</text>
				<text class="code-tips">验证码已发送至<text class="mobile">{{mobile}}</text></text>
			</view>
			<view class="u-code-input">
				<u-code-input v-model="value2" fontSize="32" size="70" mode="line" :space="30" :color="theme.bgColor"
					:borderColor="theme.bgColor" @finish="submit"></u-code-input>
			</view>
			<view class="btn code-btn">
				<u-button v-if="times>0" :text="codeText" :customStyle="{backgroundColor:'#BBBBBB',color:'#ffffff'}"
					shape="circle"></u-button>
				<u-button v-else :text="codeText" :customStyle="{backgroundColor:theme.bgColor,color:'#ffffff'}"
					shape="circle" @click="handleCode"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				mobile: '',
				value2: '',
				times: 60,
				codeText: '重新获取验证码',
				timer: null,
				Form: {
					mobile: '',
					captcha: ''
				}
			};
		},
		onLoad(e) {
			this.mobile = e.mobile
			this.timer = this.getTimer();
		},
		methods: {
			//提交
			submit: async function(e) {
				this.Form.mobile = this.mobile
				this.Form.captcha = e
				let res = await this.$api.mobilelogin(this.Form);
				if (!res.code) {
					uni.$u.toast(res.msg);
					return;
				}

				uni.$u.vuex('vuex_token', res.data.token);
				uni.$u.route({
					url: '/pages/index/index',
					type: 'redirect',
				})
			},
			getTimer() {
				let that = this
				var interval = setInterval(() => {
					let times = --that.times
					that.codeText = "重新获取验证码(" + that.times + ")"
					if (that.times <= 0) {
						that.times = 0
						that.codeText = "重新获取验证码"
					}
				}, 1000)
				setTimeout(() => {
					clearInterval(interval)
					that.codeText = "重新获取验证码"
				}, 60000)
			},
			//重新获取验证码
			handleCode() {
				this.times = 60
				this.getTimer();
			},
		},
	}
</script>

<style lang="less">
	.content {
		padding: 88rpx 30rpx 30rpx;

		.tips {
			display: block;
			font-size: 52rpx;
			font-weight: 600;
			padding: 30rpx 0;
		}

		.code-tips {
			color: #999999;
			font-size: 28rpx;

			.mobile {
				color: #060606;
			}
		}

		.code-btn {
			margin-top: 30rpx;
			padding: 30rpx;
		}

		.u-code-input {
			padding: 30rpx 0;

			.u-code-input {
				justify-content: space-between;
			}
		}
	}
</style>